<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="编辑"></u-navbar> -->
		<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 110px);" :show-scrollbar="false">
			<view class="pl-3">
				<u-form :model="form" ref="uForm">
					<u-form-item required label-width="180" label="上市简报主题" prop="title">
						<u-input class="mr-3 " v-model="form.title" input-align="right" />
					</u-form-item>
					<u-form-item required label="企业名称" label-width="150" prop="enterpriseName">
						<u-input class="mr-3 " v-model="form.enterpriseName" input-align="right" />
					</u-form-item>
					<u-form-item required label="手机号" label-width="150" prop="phone">
						<u-input class="mr-3 " v-model="form.phone" input-align="right" />
					</u-form-item>
					<!-- <u-form-item required style="padding-right: 10px;" label-width="150" label="产品名称"
						prop="productInformId">
						<u-input v-model="valueProductName" :value="form.productName" placeholder="请选择" :type="type"
							input-align="right" :border="false" @click="showProductName = true" />
						<u-action-sheet :list="actionListCp" v-model="showProductName"
							@click="actionClickProductName"></u-action-sheet>
					</u-form-item> -->
					<u-form-item style="padding-right: 10px;" required label-width="180" label="产品名称"
						prop="productInformId">
						<u-input v-model="valueProductName" :value="form.productName" placeholder="请选择产品名称" :type="type" input-align="right"
							:border="false" @click="showNatureBusinessHandler" />
						<u-picker @confirm="selectNatureBusiness" mode="selector" v-model="showNatureBusiness"
							:default-selector="[0]" :range="natureBusinessList" range-key="text"></u-picker>
					</u-form-item>
					
					<u-form-item required label-width="180" label="预计上市时间" prop="listingTime">
						<uni-calendar ref="calendarl" :start-date="currentDate" :insert="false" :lunar="true"
							@confirm="confirmName" :time-picker="true" />
						<view v-if="!selectedNameDate" class="text-999999 right-1-5 position-absolute"
							@click="openName">
						</view>
						<view class="right-1-5 position-absolute" @click="openName">{{form.listingTime}}</view>
					</u-form-item>

					<u-form-item required label-width="180" label="基地地址" prop="baseAddress">
						<u-input class="mr-3 " :disabled="true" placeholder="选择产品后自动显示基地地址" v-model="form.baseAddress"
							input-align="right" />
					</u-form-item>
					<u-form-item required label-width="130" label="预计产量" prop="estimatedOutput">
						<u-input class="mr-3 " v-model="form.estimatedOutput" input-align="right" />
						<text class="mr-3 ">{{form.productSpecsText}}</text>
					</u-form-item>
				</u-form>
			</view>
			<view class="dfex-center text-center fixed-bottoms pl-2 pr-2">
				<view class="mr-5 bg-EFEFEF rounded-circle py-2 pl-5 pr-5  font-14" @click="goBack">保存</view>
				<view class="ml-5 bg-78AB06 rounded-circle py-2 pl-5 pr-5 text-white font-14" @click="NewListEditor">提交
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import calendar from "@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue"
	export default {
		components: {
			calendar
		},
		data() {
			return {
				form: {
					title: '',
					enterpriseName: '',
					phone: '',
					agricultureUserId: '',
					productInformId: '',
					listingTime: '',
					baseAddress: '',
					estimatedOutput: '',
					updateTime: '',
					productSpecsText: '',
					productSpecs:''
				},
				type: 'select',
				selectedNameDate: null,
				actionListCp: [], // 产品名称列表
				showProductName: false, // 控制显示产品名称选项的变量
				valueProductName: '', // 选中的产品名称值

				border: true,
				labelStyle: {
					width: '180px'
				},
				isAdd: true,
				rules: {
					title: [{
						required: true,
						message: '上市简报主题不为空',
						trigger: ['change', 'blur'],
					}, ],
					estimatedOutput: [
						{
							validator: (rule, value, callback) => {
								const reg = /^[0-9]+(\.[0-9]+)?$/; // 允许输入整数和小数
								if (!reg.test(value)) {
									callback(new Error('请输入数字'));
								} else {
									callback();
								}
							},
							trigger: ['change', 'blur'],
						}
					],
				},
				pages: {
					pageNo: 1,
					pageSize: 100,
					total: 0,
				},
				valueProductName: '',
				showNatureBusiness: false,
				natureBusinessList: [],
			};
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			const id = options.id;
			this.NewListDetail(id)
			this.NewListD();
		},
		created() {
			this.setCurrentDate();
		},
		methods: {
			showNatureBusinessHandler() {
				this.showNatureBusiness = true;
			},
			selectNatureBusiness(e) {
				this.valueProductName = this.natureBusinessList[e[0]].text;
				this.form.productInformId = this.natureBusinessList[e[0]].id;
				this.form.baseAddress = this.natureBusinessList[e[0]].baseAddress;
				this.form.productSpecs = this.natureBusinessList[e[0]].productSpecs;
			},
			NewListD() {
				$H.get('/agriculture/productInform/productNameList', {
					...this.pages
				}).then((res) => {
					this.natureBusinessList = (res.result || []).map((v) => {
						return {
							text: v.productName,
							id: v.id,
							baseAddress: v.baseAddress,
							productSpecs: v.productSpecs
						}
					})
					const target = this.natureBusinessList.find(
						(v) => v.id === this.form.productInformId
					)
					this.valueProductName = target ? target.text : ''
				})
			},
			// actionClickProductName(index) {
			// 	this.valueProductName = this.actionListCp[index].text;
			// 	this.form.productInformId = this.actionListCp[index].id;
			// 	this.form.baseAddress = this.actionListCp[index].baseAddress;
			// 	this.form.productSpecsText = this.actionListCp[index].productSpecs;
			// },

			mounted() {
				// 在组件加载时调用接口请求方法，传入相应的id
				this.NewListDetail(yourIdHere);
			},
			openName() {
				this.$refs.calendarl.open();
			},
			confirmName(e) {
				this.selectedNameDate = e.fulldate;
				this.selectedNameDate = e.fulldate;
				// 获取当前的日期
				const formattedDate = e.fulldate; // 只使用日期部分
				this.form.listingTime = formattedDate;
			},
			setCurrentDate() {
				const now = new Date();
				const year = now.getFullYear();
				const month = (now.getMonth() + 1).toString().padStart(2, '0'); // 月份补齐两位数
				const day = now.getDate().toString().padStart(2, '0'); // 日期补齐两位数
				this.currentDate = `${year}-${month}-${day}`;
			},

			NewListEditor() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						const requestData = {
							...this.form,
							isAdd: true
						};
						$H.post('/basisInform/listingBriefing/agriculture/edit', requestData, {}).then(res => {
							if (res.code === 200) {
								uni.showToast({
									title: res.message,
									icon: 'success',
									duration: 4000
								})
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 4000);
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none',
								})
							}
						}).catch(error => {
							uni.showToast({
								title: "网络错误，请稍后再试",
								icon: 'none'
							});
						});
					} else {
						uni.showToast({
							title: "请完整填写表单",
							icon: 'none'
						});
					}
				});
			},
			NewListDetail(id) {
				$H.get('/basisInform/listingBriefing/queryById', {
					id: id
				}, {}).then(res => {
					this.form = res.result
				}).catch(error => {
					uni.showToast({
						title: "网络错误，请稍后再试",
						icon: 'none'
					});
				});
			},

			// 保存到草稿箱
			goBack() {
				const requestData = {
					...this.form,
					needChannels: this.valueProduct,
					isAdd: false
				};
				uni.showModal({
					title: '取消操作',
					content: '是否暂存内容到草稿箱？',
					success: function(res) {
						if (res.confirm) {
							$H.post(
								'/basisInform/listingBriefing/agriculture/edit', requestData, {}, {
									token: true
								}
							).then((res) => {
								if (res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
									uni.navigateBack({
										delta: 1
									})
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
								}
							})
						} else if (res.cancel) {
							uni.navigateBack({
								delta: 1
							});
							uni.showToast({
								title: '取消',
								icon: 'none',
							})
						}
					},
				})
			},

		},
	};
</script>
</script>

<style>
</style>